<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送异步请求</title>
    <script type="text/javascript" src="/js/vue.min.js"></script>
    <script type="text/javascript" src="/js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="uid">
        <input @click="sendAjaxText()" type="button" value="发Ajax请求参数是文本"> <br>
        <input @click="sendAjaxPojo()" type="button" value="发Ajax请求参数是pojo对象"><br>
        <input @click="sendAjaxArray()" type="button" value="发Ajax请求参数是数组"><br>
        <input @click="sendAjaxMap()" type="button" value="发Ajax请求参数是Map"><br>
    </div>
<script type="text/javascript">
    new Vue({
        el:"#uid",
        data:{
            //定义Map集合
            userMap:{
                id:3,
                username:"jack",
                password:"123456",
            },

            //定义数组
            array:["张三","李四","王五"],
            //定义User对象
            user:{
                id:1,
                name:"张三",
                password:"123456"
            }
        },
        methods:{
            //定义函数，发送Ajax请求，请求参数是Map
            sendAjaxMap:function(){
                axios.post("/ajaxJson/sendMap.do",this.userMap).then(response=>{
                    console.log(response);
                }).catch();
            },

            //定义函数，发送Ajax请求，请求参数是数组
            sendAjaxArray(){
                axios.post("/ajaxJson/sendArray.do",this.array).then(response=>{
                    console.log(response);
                }).catch();
            },

            //定义函数，发送ajax请求，请求参数pojo对象
            sendAjaxPojo:function(){
                //发送异步请求，参数是user对象
                //post方法，发送post请求，第一个参数是服务器URL，第二个参数是请求的参数
                axios.post("/ajaxJson/sendPojo.do",this.user).then(response=>{
                    console.log(response);
                }).catch();

            },

            //定义函数，发送ajax请求，请求参数文本数据
            sendAjaxText:function(){
                //发送异步请求,接收服务器的响应数据
               axios({
                   //请求方式
                   method:"POST",
                   //请求地址
                   url:"/ajaxJson/sendText.do",
                   //请求参数
                   params:{
                       username:"zhangsan",
                       password:"123456"
                   }
               }).then(response=>{
                   //response服务器响应回来的数据
                   console.log(response.data);
               }).catch();
            }
        }
    });
</script>
</body>


</html>